<template>
    <v-md-editor :model-value="modelValue" :height="height + 'px'" :disabled-menus="[]"
        :include-levels="[1, 2, 3, 4, 5, 6]" @upload-image="uploadImageHandler" @change="change">
    </v-md-editor>
</template>

<script setup>
import VMdEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';
import hljs from 'highlight.js';
import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();

VMdEditor.use(githubTheme, {
    Hljs: hljs,
});

const props = defineProps({
    modelValue: {
        type: String,
        default: '',
    },
    height: {
        type: Number,
        default: 500,
    },
})

const emit = defineEmits();
const change = (markdownContent, htmlContent) => {
    emit('update:modelValue', markdownContent);
    emit('htmlContent', htmlContent);
}

const uploadImageHandler = async (e, insertImage, files) => {
    let result = await proxy.Request({
        url: '/file/uploadImage',
        params: {
            file: files[0]
        }
    })
    if (!result) {
        return;
    }
    const url = proxy.globalInfo.imageUrl + result.data.fileName;
    insertImage({
        url: url,
        desc: '图片'
    })
}
</script>

<style lang="scss" scoped></style>
